<template>
  <!-- 头部菜单 -->
  <div class="header">
    <el-menu class="el-menu-demo" mode="vertical" text-color='#fff' background-color="#6528e0"
      active-text-color="#ffd04b">
      <div class="nav-wrap">
        <!-- logo -->
        <el-menu-item index="1">
          <a href="http://www.x-zd.com/" class="logo"></a>
        </el-menu-item>
        <!-- 输入框 -->
        <el-menu-item index="2">
          <el-input class="input" v-model="input" placeholder="添加todo" @keyup.enter="handleAdd">
            <!-- 前面的图标 -->
            <template #prefix>
              <el-icon class="el-input__icon" @click="handleAdd">
                <CirclePlusFilled />
              </el-icon>
            </template>
            <!-- 后面的图标 -->
            <template #suffix>
              <el-icon class="el-input__icon" v-if="input" @click="input = ''">
                <CircleClose />
              </el-icon>
            </template>
          </el-input>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const input = ref('')

const props = defineProps({
  TodoLists: {
    type: Array,
    required: true,
  }
})
const emits = defineEmits(['addTodoList'])

//添加数据
const handleAdd = () => {
  //判断输入值是否有效,以及内容是否重复
  if (!input.value.trim()) {
    ElMessage({
      showClose: true,
      message: '输入的内容无效！',
      type: 'warning',
      offset: 8,
    })
    input.value = ''
  } else if (props.TodoLists.some(item => item.text == input.value)) {
    ElMessage({
      showClose: true,
      message: '数据重复！',
      type: 'warning',
      offset: 8,
    })
    input.value = ''
  } else {
    emits('addTodoList', input.value)
    input.value = ''
  }
}
</script>

<style lang='scss' scoped>
.nav-wrap {
  width: 800px;
  margin: 0 auto;
  display: flex;

  .logo {
    display: block;
    width: 100px;
    height: 100%;
    background: url('../assets/logo.png') no-repeat center;
    background-size: 80px;
  }

  .input {
    width: 300px !important;
    height: 40px;
  }

  .el-menu-item:nth-child(2) {
    margin-left: 20px;
    ;
  }

  .el-menu-item:nth-child(2):hover {
    background-color: transparent !important;
  }

  .el-icon:hover {
    cursor: pointer;
  }
}
</style>